<template>
  <div class="bx y jc w330px m5px">
    <el-input
      type="text"
      placeholder="请输入车型名称"
      v-model="data.name"
      :maxlength="edit?10:0"
      :show-word-limit="edit?true:false"
      size="mini"
      @input="nameInput"
      :style="nameStyle"
      :readonly="!edit"
      class="inputTitle"
    />
    <div class="wf h5px mb5px bxb"></div>
    <span>
      价格:
      <el-input
        type="number"
        placeholder="请输入价格"
        v-model="data.price"
        size="mini"
        :min="0"
        @input="priceInput"
        :style="priceStyle"
        :readonly="!edit"
      />
    </span>
    <el-divider />
    <kindeditor v-model="data.info" @change="kindChange" v-if="edit" />
    <div v-else v-html="data.info"></div>
  </div>
</template>

<script>
import kindeditor from "../kindeditor";
export default {
  components: { kindeditor },
  props: ["fdata", "edit"],
  watch: {
    fdata: {
      handler(a) {
        this.nameInput(this.fdata.name);
        this.priceInput(this.fdata.price);
        // this.data = this.fdata.v2item(this.mkey, "name");
        this.data = this.fdata;
        // console.log(this.$cp(this.data));
      }
    }
  },
  data() {
    return {
      data: {},
      nameStyle: "width: 100px",
      priceStyle: "width: 100px"
    };
  },
  created() {
    this.data = this.fdata;
  },
  methods: {
    nameInput(a) {
      let w = this.$GetLength(a) * 9 + 16;
      if (this.edit) w += 30;
      this.nameStyle = "width: " + w + "px";
      this.$emit("change", this.$cp(this.data));
    },
    priceInput(a) {
      let w = this.$GetLength(a + "") * 9 + 45;
      this.priceStyle = "width: " + w + "px";
      this.$emit("change", this.$cp(this.data));
    },
    kindChange(a) {
      this.$emit("change", this.$cp(this.data));
    }
  }
};
</script>

<style lang="less" scoped>
</style>
